<template>
  <el-tabs v-model="activeName" v-bind="{
    type: 'card',
    ...$attrs
  }" @tab-click="changeBtn">
    <el-tab-pane :label="item.label" :name="item.value" v-for="item in data">
      <template v-if="item.value === activeName">
        <slot :name="item.value" v-if="$slots[item.value]" />
        <template v-if="templateObj && item.template && templateObj[item.template]">
          <component :is="templateObj[item.template]" v-bind="query" @saveBtn="saveBtn"></component>
        </template>
        <p v-else>{{ item }}</p>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup lang="ts">
//获取父级数据
const props = withDefaults(
  defineProps<{
    data?: any;//tabs数据
    active?: any;//默认选项
    templateObj?: any;//模版组
    query?: any;//模版参数
  }>(),
  {
    query: {}
  },
);
const activeName = ref(null)
const changeBtn = (tab: any, event: Event) => {
  // console.log(tab, event)
  emit('changeBtn', tab, event)
}
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'changeBtn', tab: any, eventTab: any): void;
  (event: 'saveBtn'): void;
}>();
const saveBtn = () => {
  emit('saveBtn')
}
onMounted(() => {
  activeName.value = props.active || props.data[0]?.value
});
</script>
<style scoped></style>
